<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电气检测报告系统</title>
    <link rel="stylesheet" href="/public/static/LuckySheet/plugins/css/pluginsCss.css" />
    <link rel="stylesheet" href="/public/static/LuckySheet/plugins/plugins.css" />
    <link rel="stylesheet" href="/public/static/LuckySheet/css/luckysheet.css" />
    <link rel="stylesheet" href="/public/static/LuckySheet/assets/iconfont/iconfont.css" />
  </head>
  <body>
    <div id="app">
      <style>
        .loding {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .loader {
          display: inline-block;
          vertical-align: middle;
          position: relative;
          margin: 10px;
        }

        @keyframes loader-bubbles {
          0% {
            box-shadow: 0 -10px #3b82f6, 3px 0 #3b82f6, 5px 0 #3b82f6;
          }

          30% {
            box-shadow: 3px -20px rgba(239, 223, 255, 0), 5px -10px #3b82f6, 5px 0 #3b82f6;
          }

          60% {
            box-shadow: 3px 0 rgba(239, 223, 255, 0), 4px -20px rgba(239, 223, 255, 0),
              3px -10px #3b82f6;
          }

          61% {
            box-shadow: 3px 0 #3b82f6, 4px -20px rgba(239, 223, 255, 0), 3px -10px #3b82f6;
          }

          100% {
            box-shadow: 0 -10px #3b82f6, 4px -20px rgba(239, 223, 255, 0),
              5px -20px rgba(239, 223, 255, 0);
          }
        }

        .loader {
          width: 10px;
          height: 20px;
          margin-left: 20px;
          margin-right: 20px;
          background: #3b82f6;
        }

        .loader:before,
        .loader:after {
          content: '';
          position: absolute;
        }

        .loader:before {
          top: -8px;
          left: -13px;
          width: 0;
          height: 0;
          border: 18px solid transparent;
          border-bottom: 20px solid #3b82f6;
          border-radius: 3px;
        }

        .loader:after {
          top: 0;
          left: 0;
          width: 4px;
          height: 4px;
          background: #3b82f6;
          border-radius: 50%;
          animation: loader-bubbles 1s linear infinite forwards;
        }
      </style>
      <div class="loding">
        <div class="loader"></div>
        <h3>加载中...</h3>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
    <script src="/public/static/LuckySheet/plugins/js/plugin.js" defer></script>
    <script src="/public/static/LuckySheet/luckysheet.umd.js" defer></script>
  </body>
</html>
